<template>
  <el-dialog
    ref="myDialog"
    :before-close="handleClose"
    class="dialog-box animate__animated"
    v-model="visible"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <div class="img animate__animated animate__bounce animate__delay-1s">
      <img :src="'data:image/png;base64,' + img" alt="" />
    </div>
  </el-dialog>
</template>

<script type="link">

export default {
  components: {
  },
  data () {
    return {
      visible: false, // 图片列表
      img: ''
    };
  },
  mounted () {
  },
  methods: {
    showFn (img) {
      this.visible = true
      this.img = img
      this.$nextTick(() => {
        const dialogElement = document.querySelector('.dialog-box');
        if (dialogElement) {
          dialogElement.classList.add('animate__zoomInUp');
        }
      });
    },
    handleClose (done) {
      const dialogElement = document.querySelector('.dialog-box');
      if (dialogElement) {
        dialogElement.classList.add('animate__zoomOutDown');
      }
      setTimeout(() => {
        done();
      }, 1000); // 动画持续时间

      // console.log(this.$refs.myDialog.$el);
      // this.$nextTick(() => {
      //   this.$refs.myDialog.$el.classList.add('animate__zoomOutDown');
      //   setTimeout(() => {
      //     done();
      //   }, 1000); // 动画持续时间
      // });
    }
  }
};
</script>

<style scoped>
.dialog-box {
  background: rgba(0, 0, 0, 0.8);
}
.img {
  width: 80%;
  margin: auto;
}
img {
  width: 100%;
}
</style>